<template>
    <div style="margin-right: 24px;">
        <el-dropdown trigger="click">
            <el-badge :value="downloadList.length" :show-zero="false" class="item">
                <img style="width: 24px; height: 24px;cursor: pointer;" src="@/assets/header/download.png" alt="" />
            </el-badge>
            <template #dropdown>
                <div class="download_body">
                    <div class="download_header">下载中心</div>
                    <div class="download_content">
                        <template v-if="downloadList.length == 0">
                            <app-none :size="120" />
                        </template>
                        <template v-if="downloadList.length > 0">
                            <div class="list">
                                <div class="item" v-for="(item, index) in downloadList" :key="index">
                                    <div class="title">{{ `${item.type} (${item.version}) 内核` }}</div>
                                    <div>
                                        <el-progress :percentage="item.progress" :stroke-width="10" striped
                                            :show-text="false" striped-flow :duration="5" />
                                        <div style="font-size: 12px;margin-top: 8px;color: #b2b2b5;">正在下载: {{
                                            item.progress }}%</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { getChromiums } from '@/utils/getChromiums'
const downloadList = ref([])

onMounted(() => {
    window.electron.onDownloadBrowser((event, msg) => {
        let index = downloadList.value.findIndex(item => item.type == msg.type && item.version == msg.version);
        if (index != -1) {
            if (msg.status == 0) {
                downloadList.value[index].status = msg.status
                downloadList.value[index].progress = msg.progress
            } else {
                downloadList.value.splice(index, 1);
                ElMessage({
                    message: `${msg.type} (${msg.version}) 内核下载完成`,
                    type: 'success',
                })
                getChromiums()
            }
        } else {
            if (msg.status == 0) {
                downloadList.value.push(msg)
            }
        }


    })
})

</script>

<style lang="scss" scoped>
.download_body {
    width: 350px;
    min-height: 200px;
    padding: 16px;
    display: flex;
    flex-direction: column;

    .download_header {
        display: flex;
        color: #3d3d3d;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 16px;
    }

    .download_content {
        .list {
            display: flex;
            flex-direction: column;

            .item:not(:first-child) {
                margin-top: 16px;
            }

            .item {
                background-color: #f2f3f5;
                height: 100px;
                padding: 16px;

                .title {
                    font-size: 14px;
                    margin-bottom: 8px;
                }
            }
        }

    }
}
</style>